<template>
    <!-- 更改分类 -->
    <el-dialog
        class="product-edit-widget__wrap"
        title="编辑产品信息"
        width="50%" center
        :before-close="close"
        :visible.sync="dialogVisible">
        <el-form
            v-if="product"
            :model="product"
            label-width="120px"
            label-position="left"
            class="px-0 item m-auto">
            <el-form-item label="产品牌号">
                <el-input placeholder="LPD-183UV Light Curable Adhesive" v-model="product.productName"></el-input>
            </el-form-item>

            <el-form-item label="所属品牌">
                <el-input placeholder="3M" v-model="product.manufactureName"></el-input>
            </el-form-item>

            <el-form-item label="附件类型">
                <el-input placeholder="pdf" v-model="product.fileType"></el-input>
            </el-form-item>

            <el-form-item label="建议分类">
                <el-input placeholder="分类" v-model="product.catalogName"></el-input>
            </el-form-item>

            <el-form-item label="附件" class="text-left">
                <div v-if="product.files.length" class="text-left preview-group">
                    <span class="file-preview" v-for="(item, ind) in product.files">
                        <a :href="item.url" target="_blank">
                            <span>点击预览</span>
                        </a>
                    </span>
                </div>

                <div v-else>无</div>
            </el-form-item>

            <div class="text-center">
                <el-button class="btn-primary" @click="onSubmit">保存修改</el-button>
                <el-button type="info" @click="close">取消</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script>
    import {Dialog, Form, FormItem} from 'element-ui';
    import FileUpload from '../../components/base/FileUpload';

    export default {
        name: 'product-edit',
        components: {
            ElDialog: Dialog,
            ElForm: Form,
            ElFormItem: FormItem,
            FileUpload
        },
        data() {
            return {
                product: null,
                dialogVisible: false
            };
        },
        methods: {
            open(data) {
                this.product = data;
                console.log(data);
                this.dialogVisible = true;
            },
            close() {
                this.dialogVisible = false;
            },
            getFiles(val) {
                this.product.files = [...this.product.files.concat(val)];
            },
            // delectFile(fileIndex) {
            //     this.product.files.splice(fileIndex, 1);
            // },
            onSubmit() {
                API.put('user/product/' + this.product._id, this.product).then(res => {
                    Ele.$message.success('产品信息修改成功');
                    this.$emit('input', true);
                    this.close();
                })
            }
        }
    };
</script>

<style lang="scss">
    .product-edit-widget {
        &__wrap {
            .item {
                &.pd {
                    padding: 20px 40px;
                }

                .file-preview {
                    position: relative;
                    display: inline-block;
                    vertical-align: top;
                    width: 100px;
                    height: 100px;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    background: transparent url('~static/images/file.png') center/cover;
                    a {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: inline-block;
                        width: 100px;
                        height: 100px;
                        z-index: 1;

                        span {
                            display: inline-block;
                            visibility: hidden;
                        }

                        &:hover {
                            span {
                                display: inline-block;
                                visibility: visible;
                                width: 100px;
                                height: 100px;
                                text-decoration: none;
                                line-height: 100px;
                                text-align: center;
                                background-color: rgba(0, 0, 0, .6);
                                color: #eee;
                            }

                            & + .el-icon-error {
                                color: transparent;
                            }
                        }
                    }

                    .el-icon-error {
                        position: absolute;
                        right: 0;
                        top: 0;
                        transform: translate3d(50%, -50%, 0);
                        color: #ddd;
                        z-index: 999;

                        &:hover {
                            color: #333;
                        }
                    }
                }
            }
        }
    }

</style>
